Setting group - Width settings - Full bleed

The Width settings - Full bleed are core theme settings that define the maximum width of content and sections within an online shop. These settings ensure a consistent and responsive design across various devices and screen sizes. They can be applied globally but also allow for customization at the section or block level.

The Content width setting offers options ranging from predefined pixel widths to a full-width display, allowing flexibility in how content is presented. The Section width setting provides choices for adhering to content width, extending to full width, or creating full-bleed sections for a more immersive design.

Usage examples include selecting full width for large images or banners to enhance their visual impact across all screen sizes. For text-heavy sections, opting for content width can maintain readability. Full bleed can be used for hero sections or promotional banners to create a striking visual impact. Utilizing the theme setting option helps maintain consistency across different pages and devices, ensuring a seamless user experience.

Overview

The settings detailed here are core theme settings that control the overall look and feel of an online shop. These settings are applied globally across the site but can be overridden at the section or block level. The focus is on width configurations of various content elements, ensuring a consistent and responsive design throughout the site.

Key components and functionality

Width settings - Full bleed

This setting group allows you to define the maximum width of content and sections within the theme. It provides flexibility in how content is displayed across different devices and screen sizes, ensuring a cohesive and visually appealing layout.

Content width

This setting determines the maximum width of the content area. It offers several options to accommodate different design needs and screen sizes.

• Options:
  1. Use theme setting (default)
  2. 768px
  3. 1024px
  4. 1240px
  5. 1440px
  6. 1600px
  7. No max

These options enable you to choose a predefined width or allow the content to stretch to the full width of the screen.

Section width

The section width setting controls how wide a section can be displayed on the page. This is particularly useful for creating full-width or full-bleed sections that span the entire width of the browser window.

• Options:
  1. Use theme setting
  2. Content width
  3. Full width
  4. Full bleed (default)

These options allow you to control whether a section should adhere to the content width, extend to the full width of the page, or even bleed beyond the page margins for a more immersive design.

Disclaimer

A disclaimer is included to inform users about the implications of adjusting width settings. It emphasizes the importance of considering the overall design and user experience when making changes to these settings.

Usage examples

1. Responsive Design:

   • You might consider selecting "Full width" for sections that contain large images or banners to ensure they look impressive on all screen sizes.
   • Opting for "Content width" for text-heavy sections can help maintain readability and a clean layout.

2. Immersive Experience:

   • You might consider using "Full bleed" for hero sections or promotional banners to create a striking visual impact that captures the user's attention.

3. Consistency Across Devices:

   • Utilizing the "Use theme setting" option can help maintain a consistent look across different pages and devices, ensuring a seamless user experience.

By carefully selecting the appropriate width settings, you can enhance the visual appeal and functionality of your online shop, providing a better experience for your customers.